<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>HTML5语义化标签应用示例</title>
	<style>
		body {
			font-family: 'Arial', sans-serif;
			line-height: 1.6;
			margin: 0;
			padding: 0;
			color: #333;
			background-color: #f9f9f9;
		}
		
		.container {
			max-width: 1200px;
			margin: 0 auto;
			padding: 0 20px;
		}
		
		.tag-role {
			background-color: #e8f4fd;
			border-left: 4px solid #3498db;
			padding: 15px 20px;
			margin: 20px 0;
			border-radius: 0 4px 4px 0;
		}
		
		.tag-role h3 {
			color: #2c3e50;
			margin-top: 0;
		}
		
		.tag-role ul {
			padding-left: 20px;
			margin-bottom: 0;
		}
		
		.tag-role li {
			margin: 8px 0;
		}
		
		.tag-role code {
			background-color: #fff;
			padding: 2px 6px;
			border-radius: 2px;
			color: #e74c3c;
		}
		
		header,
		nav,
		main,
		article,
		section,
		aside,
		footer,
		figure,
		figcaption,
		details,
		summary {
			margin: 0;
			padding: 0;
		}
		
		header {
			background-color: #2c3e50;
			color: white;
			padding: 20px 0;
			margin-bottom: 20px;
		}
		
		.site-title {
			margin: 0;
			font-size: 2.2rem;
		}
		
		.site-description {
			margin: 5px 0 0 0;
			font-style: italic;
			opacity: 0.9;
		}
		
		nav {
			background-color: #34495e;
			padding: 10px 0;
			margin-bottom: 20px;
		}
		
		nav ul {
			list-style: none;
			padding: 0;
			margin: 0;
			display: flex;
			gap: 20px;
		}
		
		nav a {
			color: white;
			text-decoration: none;
			padding: 8px 12px;
			border-radius: 4px;
			transition: background-color 0.3s;
		}
		
		nav a:hover {
			background-color: #2980b9;
		}
		
		.content-wrapper {
			display: flex;
			gap: 20px;
		}
		
		main {
			flex: 3;
		}
		
		article {
			background-color: white;
			padding: 25px;
			border-radius: 8px;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
			margin-bottom: 25px;
		}
		
		article header {
			background-color: transparent;
			color: #333;
			padding: 0 0 15px 0;
			margin-bottom: 15px;
			border-bottom: 1px solid #eee;
		}
		
		.post-meta {
			color: #7f8c8d;
			font-size: 0.9rem;
		}
		
		section {
			margin-bottom: 20px;
		}
		
		section h3 {
			color: #2980b9;
			margin-top: 25px;
		}
		
		aside {
			flex: 1;
			background-color: white;
			padding: 20px;
			border-radius: 8px;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		}
		
		.widget {
			margin-bottom: 30px;
		}
		
		.widget h3 {
			color: #2c3e50;
			border-bottom: 2px solid #3498db;
			padding-bottom: 8px;
		}
		
		.widget ul {
			list-style: none;
			padding: 0;
		}
		
		.widget li {
			margin-bottom: 10px;
		}
		
		.widget a {
			color: #3498db;
			text-decoration: none;
		}
		
		.widget a:hover {
			text-decoration: underline;
		}
		
		figure {
			margin: 20px 0;
		}
		
		img {
			max-width: 100%;
			height: auto;
			border-radius: 4px;
		}
		
		figcaption {
			text-align: center;
			color: #7f8c8d;
			font-size: 0.9rem;
			margin-top: 8px;
		}
		
		blockquote {
			border-left: 4px solid #3498db;
			padding-left: 15px;
			margin-left: 0;
			color: #7f8c8d;
		}
		
		details {
			margin: 15px 0;
			padding: 10px;
			background-color: #f8f9fa;
			border-radius: 4px;
		}
		
		summary {
			font-weight: bold;
			cursor: pointer;
		}
		
		footer {
			background-color: #2c3e50;
			color: white;
			padding: 30px 0;
			margin-top: 30px;
		}
		
		.footer-content {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			gap: 20px;
		}
		
		.footer-section {
			flex: 1;
			min-width: 200px;
		}
		
		.footer-section h3 {
			border-bottom: 2px solid #3498db;
			padding-bottom: 10px;
			margin-top: 0;
		}
		
		address {
			font-style: normal;
		}
		
		.copyright {
			text-align: center;
			padding-top: 20px;
			margin-top: 20px;
			border-top: 1px solid rgba(255, 255, 255, 0.1);
		}
		
		@media (max-width:768px) {
			.content-wrapper {
				flex-direction: column;
			}
			nav ul {
				flex-wrap: wrap;
			}
		}
	</style>
</head>

<body>
	<header>
		<div class="container">
			<h1 class="site-title">Web技术博客</h1>
			<p class="site-description">分享前端开发知识与实践经验</p>
		</div>
	</header>
	<nav>
		<div class="container">
			<ul>
				<li>
					<a href="#home">首页</a>
				</li>
				<li>
					<a href="#articles">技术 文章</a>
				</li>
				<li>
					<a href="#tutorials">教程</a>
				</li>
				<li>
					<a href="#resources">资源</a>
				</li>
				<li>
					<a href="#about">关于</a>
				</li>
			</ul>
		</div>
	</nav>
	<div class="container">
		<div class="content-wrapper">
			<main>
				<article>
					<header>
						<h2>HTML5语义化标签完全指南</h2>
						<p class="post-meta">作者: 前端开发者 | 发布日期:
							<time datetime="2025-09-28">2025年9月28日</time> | 分类:
							<a href="#html5">HTML5</a>
						</p>
					</header>
					<div class="tag-role">
						<h3>一、核心语义化标签及作用</h3>
						<ul>
							<li><code>&lt;header&gt;</code>：页面/区块的头部，存放标题、Logo、简介等引导信息；</li>
							<li><code>&lt;nav&gt;</code>：导航链接区，存放页面间跳转菜单，方便用户定位功能；</li>
							<li><code>&lt;main&gt;</code>：页面唯一主内容区，排除侧边栏、导航等辅助内容；</li>
							<li><code>&lt;article&gt;</code>：独立内容块（如文章、评论），可单独提取且语义完整；</li>
							<li><code>&lt;section&gt;</code>：内容章节/模块，划分
								<article>内的结构（如“定义”“优势”）；</li>
							<li><code>&lt;aside&gt;</code>：侧边栏/附加内容区，内容与主内容相关但非必需；</li>
							<li><code>&lt;footer&gt;</code>：页面/区块的底部，存放版权、联系方式等收尾信息；</li>
							<li><code>&lt;figure&gt;</code>：独立媒体内容区（图片、图表），常搭配
								<figcaption>用；</li>
							<li><code>&lt;figcaption&gt;</code>：
								<figure>内媒体的说明文字，确保媒体信息完整；</li>
							<li><code>&lt;details&gt;</code>：可折叠详情区，默认隐藏内容，点击
								<summary>展开；</li>
							<li><code>&lt;summary&gt;</code>：
								<details>的展开触发标题，控制详情内容的显示/隐藏；</li>
						</ul>
					</div>
					<section>
						<h3>二、什么是HTML5语义化标签？</h3>
						<p>HTML5语义化标签是指能够清晰描述内容含义的标签。与传统
							<div>相比，它不仅定义内容区块，还提供内容类型信息（如“这是导航”“这是文章”）。</p>
						<blockquote>语义化的核心是让机器理解内容——浏览器、搜索引擎可通过标签更精准识别页面结构。</blockquote>
					</section>
					<section>
						<h3>三、常用的HTML5语义化标签</h3>
						<p>HTML5引入多种语义化标签，以下是实际应用示例：</p>
						<figure><img src="https://picsum.photos/800/400?random=10" alt="HTML5语义化标签结构示意图">
							<figcaption>图1: HTML5语义化标签页面结构示意图（红色框为
								<main>主内容区，蓝色框为
									<aside>侧边栏）</figcaption>
						</figure>
						<details>
							<summary>点击展开：语义化标签使用场景对比</summary>
							<ul>
								<li>用<code>&lt;nav&gt;</code>包裹导航菜单，而非
									<div class="nav">；</li>
								<li>用<code>&lt;article&gt;</code>包裹单篇文章，而非
									<div class="article">；</li>
								<li>用<code>&lt;footer&gt;</code>包裹版权信息，而非
									<div class="footer">；</li>
							</ul>
						</details>
					</section>
					<section>
						<h3>四、语义化标签的优势</h3>
						<p>使用HTML5语义化标签的核心价值：</p>
						<ol>
							<li><strong>提升可访问性</strong> - 屏幕阅读器可通过标签快速识别内容结构（如“当前进入导航区”）；</li>
							<li><strong>改善SEO</strong> - 搜索引擎可通过标签判断内容优先级（如
								<main>内内容权重更高）；</li>
							<li><strong>增强代码可读性</strong> - 开发者无需看类名，即可识别“这是侧边栏（&lt;aside&gt;）”；</li>
							<li><strong>简化样式设计</strong> - 可直接用标签名写CSS（如<code>aside { padding: 20px; }</code>），减少冗余类名；</li>
						</ol>
					</section>
					<footer>
						<p>文章标签:
							<mark>HTML5</mark>,
							<mark>语义化</mark>,
							<mark>前端开发</mark>
						</p>
						<p>分享:
							<a href="#share-facebook">Facebook</a> |
							<a href="#share-twitter">Twitter</a> |
							<a href="#share-linkedin">LinkedIn</a>
						</p>
					</footer>
					</article>
					</main>
					<aside>
						<div class="widget">
							<h3>关于作者</h3>
							<p>资深前端开发者，拥有10年Web开发经验，专注于HTML5、CSS3和JavaScript技术分享。</p>
						</div>
						<div class="widget">
							<h3>热门文章</h3>
							<ul>
								<li>
									<a href="#css-grid">CSS Grid布局完全指南</a>
								</li>
								<li>
									<a href="#js-async">JavaScript异步编程模式</a>
								</li>
								<li>
									<a href="#responsive">响应式设计最佳实践</a>
								</li>
							</ul>
						</div>
						<div class="widget">
							<h3>订阅更新</h3>
						</div>
					</aside>
					</div>
					</div>
					<footer>
						<div class="container">
							<div class="footer-content">
								<div class="footer-section">
									<h3>关于博客</h3>
									<p>专注前端技术分享，助力开发者成长。</p>
								</div>
								<div class="footer-section">
									<h3>联系方式</h3>
									<address>邮箱：contact@webdevblog.com</address>
								</div>
								<div class="footer-section">
									<h3>快速链接</h3>
									<ul>
										<li>
											<a href="#about">关于我们</a>
										</li>
										<li>
											<a href="#privacy">隐私政策</a>
										</li>
										<li>
											<a href="#terms">使用条款</a>
										</li>
									</ul>
								</div>
							</div>
							<div class="copyright">© 2025 Web技术博客 保留所有权利</div>
						</div>
					</footer>
</body>

</html>